<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师表查询</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.1.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">

</head>
<body>


<div class="container-fluid">

    <br>
    <form class="form-inline">
        <div class="form-group">
            <label for="searchName">请输入名字:</label>
            <input type="text" class="form-control" id="searchName" placeholder="请输入名称" name="searchName">
        </div>

        <button type="button" class="btn btn-default" onclick="search();">查询</button>
    </form>

    <br>

    <table class="table table-bordered" id="teaTable">

    </table>

    <button type="button" class="btn btn-default" onclick="addTeacher();">添加教师</button>


</div>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">教师信息</h4>
            </div>
            <div class="modal-body">

                <form id="formTeacher">

                    <input hidden="hidden" id="id" name="id"/>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="num">职工号</label>
                        <input type="text" class="form-control" id="num" name="num" placeholder="职工号">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="academy">学院</label>
                        <input type="text" class="form-control" id="academy" name="academy" placeholder="学院">
                    </div>
                    <div class="form-group">
                        <label for="posts">职位</label>
                        <input type="text" class="form-control" id="posts" name="posts" placeholder="职位">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别:</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                    </div>

                </form>
                <!-- 表单结束 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveTeacher()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">


    function addTeacher()
    {
        $("#myModal").modal("show");
        $("#id").val("");
        $("#name").val("");
        $("#num").val("");
        $("#password").val("");
        $("#academy").val("");
        $("#posts").val("");
        $("#sex").val("");
        $("#age").val("");
    }

   //新增或者更新
   function saveTeacher(){

       var data=$("#formTeacher").serialize();

       var id=$("#id").val();

       if(id<1){
           //是新增
           $.ajax({

               url:"/webapi/teacher/insert",
               method:"post",
               data:data

           }).done(function (){

               $("#teaTable").bootstrapTable("destroy");
               loadTable();

               $("#myModal").modal("hide");

           })
       }
       else{
           //是更新
           $.ajax({

               url:"/webapi/teacher/update",
               method:"put",
               data:data

           }).done(function (){
               var id=$("#id").val();
               var newdata={id,
                   row:{
               name:$("#name").val(),
               num:$("#num").val(),
               password:$("#password").val(),
               academy:$("#academy").val(),
               posts:$("#posts").val(),
               sex:$("#sex").val(),
               age:$("#age").val()}}
               $('#teaTable').bootstrapTable("updateByUniqueId",newdata);
               // $("#teaTable").bootstrapTable("destroy");
               loadTable();

               $("#myModal").modal("hide");

           })
       }

   }

   function editTeacher(id){

       $("#myModal").modal("show");

       $.ajax({

           url:"/webapi/teacher/get/"+id

       }).done(function (rs){

           $("#id").val(rs.id);
           $("#name").val(rs.name);
           $("#academy").val(rs.academy);
           $("#posts").val(rs.posts);
           $("#num").val(rs.num);
           $("#password").val("");
           $("#sex").val(rs.sex);
           $("#age").val(rs.age);

       })
   }

   function del(id){

       $("#teaTable").bootstrapTable("removeByUniqueId",id);
       deleteTeacher(id);
   }


   function deleteTeacher(id){

       if(confirm("你是否真的要删除？")){

           $.ajax({
               url:"/webapi/teacher/delete/"+id,
               method:"delete"
           }).done(function (){
               loadTable();
           })


       }//end if
   }

   function search(){

       $("#teaTable").bootstrapTable("destroy");

       loadTable();
   }

   function clickFormatter(value,row,index){

        var id=value;
        var result='';
        result="<a href='#' onclick='editTeacher("+id+")' title='编辑'>编辑</a>"+"   "+
            "<a href='#' onclick='del("+id+")'" + "  "+"title='删除'>删除</a>";

        return result;
   }


    function loadTable(){

        $('#teaTable').bootstrapTable({
            url: '/webapi/teacher/getbypage',
            striped:true,//设置为true会有隔行变色效果
            singleSelect: false,//设置为true将禁止多选
            pagination:true,//设置为true会在底部显示分页条
            uniqueId:"id",
            pageSize:3,//如果设置了分页，每页数据条数
            pageNumber:1,//如果设置了分页，首页页码
            sidePagination: "server",//设置在哪里进行分页，可选值为“client”或者“server”

            queryParams:function (params){
                var paraObj={
                    size: params.limit,
                    page: params.offset/params.limit,
                    direct: "desc",
                    sort: "id",
                    name: $("#searchName").val()
                };

                return paraObj;
            },
            columns: [{
                field: 'id',
                title: '序号'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'num',
                title: '学号'
            },{
                field: 'academy',
                title: '学院'
            },{
                field: 'posts',
                title: '职位'
            },{
                field: 'sex',
                title: '性别'
            }, {
                field: 'age',
                title: '年龄'
            },{
                field: 'id',
                title: '操作',
                formatter: 'clickFormatter'
            }]
        })

    }//end of loadTable()

    $(function (){

        loadTable();
    })


</script>
</body>
</html>